<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="任务2.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 209000303黄明杰   -->
    <div id="app">
       
    </div>
    <template id="root">
        <div class="contain">
            <div class="title">
                <span>手机</span>
                <a class="x1" href="#">查看更多 ></a>
            </div>
            <div class="content">
                <div class="left"><img src="./images/ad1.png"></div>
                <div class="phone-list">
                    <ul>
                        <li class="phone" v-for="(item,index) in phoneList" :key="item.id">
                            <img :src="item.img" alt="" class="phone-img">
                            <div class="phone-title">{{ item.title }}</div>
                            <div class="phone-des">{{ item.des }}</div>
                            <div class="phone-price">
                                <span>{{ item.price }}</span>
                                <span class="phone-oldprice">{{ item.oldprice }}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        
    </template>
    <script>
        const app = Vue.createApp({
            template: "#root",
            data() {
              return {
                phoneList: [{id:"100081",img:"images/phone1.png",title:"Redmi K50 电竞版",des:"全线拉满的冷血旗舰",price:"3299元起"},
                {id:"100082",img:"images/phone2.png",title:"Xiaomi 12 Pro",des:"全线骁龙8|2K AMOLED屏幕",price:"4699元起"},
                {id:"100083",img:"images/phone3.png",title:"Xiaomi 12",des:"全线骁龙8|5000万主摄",price:"3699元起"},
                {id:"100084",img:"images/phone4.png",title:"Xiaomi 12X",des:"骁龙870",price:"2999 元起"},
                {id:"100085",img:"images/phone5.png",title:"Xiaomi 11 青春版",des:"轻薄5G,内外皆出彩",price:"1899元起",oldprice:"1999元"},
                {id:"100086",img:"images/phone6.png",title:"Redmi Note 11 Pro系列",des:"三星AMOLED屏幕",price:"1799元起"},
                {id:"100087",img:"images/phone7.png",title:"Redmi Note 11 5G",des:"5000mAh大电量",price:"1199元起"},
                {id:"100088",img:"images/phone8.png",title:"Redmi Note 11 4G",des:"5000mAh大电量",price:"969元起",oldprice:"999元"},
            ]}   
        },
    })

        const root = app.mount("#app")
    </script>
</body>
</html>